<template>
  <el-drawer
    :visible="show"
    :size="width"
    title="客服设置"
    :append-to-body="true"
    @close="close"
  >
    <div class="content">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="addPay">
        <el-form-item label="抖音客服号" prop="customer_tiktok">
          <el-input v-model="form.customer_tiktok" clearable placeholder="请输入抖音客服号"></el-input>
        </el-form-item>
      </el-form>
      <p class="infoText">请确保输入的抖音号已在抖音开放平台->小程序->设置->抖音号管理中绑定，否则功能不可用 ，<el-button type="text"><a target="_blank" href="https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/open-capacity/operation/binding/">操作指南</a></el-button></p>
    </div>
    <span class="dialog-footer rowFlex">
      <el-button class="btn" @click="close">取 消</el-button>
      <el-button class="btn" type="primary" :loading="loading" @click="submit">确 定</el-button>
    </span>
  </el-drawer>
</template>

<script type="text/javascript">
import { customerTiktok } from '@/api/miniApp'
export default {
  props: ['show', 'width', 'title', 'rowInfo'],
  data() {
    return {
      form: {
        id: '',
        customer_tiktok: ''
      },
      loading: false,
      rules: {
        customer_tiktok: [
          { required: true, message: '请输入抖音客服号', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    show(newVal, oldVal) {
      if (newVal) {
        this.form.id = this.rowInfo.id
        this.form.customer_tiktok = this.rowInfo.customer_tiktok
      }
    }
  },
  mounted() {
  },
  methods: {
    close() {
      this.$emit('update:show', false)
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true
          customerTiktok(this.form).then(res => {
            this.loading = false
            if (res.status_code === 1) {
              this.$message.success(res.msg)
              this.$emit('confirm')
              this.close()
              this.form = {
                id: '',
                customer_tiktok: ''
              }
            }
          }, err => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>

    <style lang="scss" scoped>

    ::v-deep .el-drawer{
      height: 100%;
      overflow: auto;
    }

    .content{
      width: 420px;
      height: auto;
      margin-top: 40px;
      padding: 0 20px;
    }
    .infoText{
        width: 350px;
        margin-left: 40px;
        line-height: 10px;
    }
    .titleSet{
      font-size: 16px;
      color: #333;
    }
    .question{
      color: #333333;
      font-weight: bolder;
      font-size: 16px;
      margin-left: 10px;
    }

    .dialog-footer{
      width: 100%;
      height: auto;
      position: absolute;
      right: 0px;
      bottom: 0px;
      padding-top: 20px;
      padding-bottom: 20px;
      border-top: 1px solid rgba(0, 0, 0, 0.06);
      justify-content: flex-end;
      background: #fff;
      .btn{
        width:84px ;
        height: 32px;
      }
    }
    </style>
